<template>
    <div-row :obj="obj" class="text-picture">
        <div class="CoverImg" :style="{backgroundImage: `url(${obj.image})`}">
            <div class="bg-block"/>
            <div class="col-text desc">
                <h1 class="text-title" :class="obj.animateTitle? 'wow '+obj.animateTitle : ''" v-html="obj.title"/>
                <p class="text-desc" :class="obj.animateText? 'wow '+obj.animateText : ''" v-html="obj.smTitle"/>
            </div>

        </div>
    </div-row>
</template>
<script>

export default {
    name: 'CoverImg',
    props: {
        obj: {
            type: Object
        }
    }
}
</script>
<style lang="scss" scoped>
    .CoverImg{
        min-height: 300px;
        height: 100%;
        width: 100%;
        background-size: cover;
        position: relative;
        .bg-block{
            position: absolute;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5) !important;
        }
        .desc{
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 80%;
            text-align: center;
            color:#fff;
            .h1{
                padding: 20px 0;
            }
            p{
                font-size: 14px;
                width: 80%;
                margin: 0 auto;
            }
        }
    }
</style>

